<template>
  <view class="container">
    
    <Card class="review-card">
      <view class="form-group">
        <text class="label">点评对象</text>
        <picker 
          mode="selector" 
          :range="reviewTargets" 
          @change="onTargetChange"
        >
          <view class="picker">
            {{ selectedTarget || '请选择点评对象' }}
          </view>
        </picker>
      </view>
      
      <view class="form-group">
        <text class="label">点评内容</text>
        <textarea 
          class="textarea" 
          placeholder="请输入您的点评内容" 
          v-model="form.content"
        />
      </view>
      
      <view class="form-group">
        <text class="label">评分</text>
        <view class="rating">
          <text 
            v-for="n in 5" 
            :key="n" 
            class="star"
            :class="n <= form.rating ? 'star-active' : ''"
            @click="setRating(n)"
          >
            ★
          </text>
        </view>
      </view>
      
      <Button 
        class="submit-btn" 
        type="primary" 
        text="提交点评" 
        :loading="loading"
        @click="handleSubmit"
      />
    </Card>
    
    <Card class="share-card">
      <view class="card-header">
        <text class="card-title">分享到</text>
      </view>
      
      <view class="share-options">
        <Button class="share-btn wechat" @click="shareToWechat">
          <text class="share-icon">💬</text>
          <text class="share-text">微信</text>
        </Button>
        
        <Button class="share-btn qq" @click="shareToQQ">
          <text class="share-icon">🔗</text>
          <text class="share-text">QQ</text>
        </Button>
        
        <Button class="share-btn copy" @click="copyLink">
          <text class="share-icon">📋</text>
          <text class="share-text">复制链接</text>
        </Button>
      </view>
    </Card>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        content: '',
        rating: 5
      },
      reviewTargets: ['张小明的学习计划', '李小红的学习目标', '王小刚的生活目标'],
      selectedTarget: '',
      loading: false
    };
  },
  
  methods: {
    onTargetChange(e) {
      this.selectedTarget = this.reviewTargets[e.detail.value];
    },
    
    setRating(rating) {
      this.form.rating = rating;
    },
    
    handleSubmit() {
      if (!this.selectedTarget) {
        uni.showToast({
          title: '请选择点评对象',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.content) {
        uni.showToast({
          title: '请输入点评内容',
          icon: 'none'
        });
        return;
      }
      
      // 模拟提交过程
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        uni.showToast({
          title: '点评提交成功',
          icon: 'success'
        });
      }, 1000);
    },
    
    shareToWechat() {
      uni.showToast({
        title: '分享到微信功能待实现',
        icon: 'none'
      });
    },
    
    shareToQQ() {
      uni.showToast({
        title: '分享到QQ功能待实现',
        icon: 'none'
      });
    },
    
    copyLink() {
      uni.setClipboardData({
        data: 'https://study-assistant.example.com/review/12345',
        success: () => {
          uni.showToast({
            title: '链接已复制到剪贴板',
            icon: 'success'
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: $spacing-lg;
  padding: $spacing-xl 0;
}

.title {
  font-size: $font-size-xl;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-sm;
}

.subtitle {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.review-card {
  margin-bottom: $spacing-base;
}

.form-group {
  margin-bottom: $spacing-lg;
}

.label {
  display: block;
  font-size: $font-size-base;
  color: $text-primary;
  margin-bottom: $spacing-sm;
}

.picker {
  width: 100%;
  height: 80rpx;
  padding: 0 $spacing-base;
  line-height: 80rpx;
  border: 1rpx solid $text-tertiary;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  box-sizing: border-box;
}

.textarea {
  width: 100%;
  height: 200rpx;
  padding: $spacing-base;
  border: 1rpx solid $text-tertiary;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  box-sizing: border-box;
}

.rating {
  display: flex;
  flex-direction: row;
}

.star {
  font-size: 50rpx;
  color: $text-tertiary;
  margin-right: $spacing-sm;
  
  &:last-child {
    margin-right: 0;
  }
}

.star-active {
  color: #FFD700;
}

.submit-btn {
  margin-top: $spacing-xl;
  height: 40rpx;
}

.share-card {
  margin-bottom: $spacing-lg;
}

.card-header {
  margin-bottom: $spacing-base;
}

.card-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
}

.share-options {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: $spacing-base;
  background-color: $card-background;
  border: 1rpx solid $text-tertiary;
  border-radius: $border-radius-base;
  
  &:active {
    background-color: $background-color;
  }
}

.share-icon {
  font-size: 60rpx;
  margin-bottom: $spacing-sm;
}

.share-text {
  font-size: $font-size-sm;
  color: $text-primary;
}

.wechat {
  color: #07c160;
}

.qq {
  color: #12b7f5;
}

.copy {
  color: #faad14;
}
</style>